<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-modal
        v-model:visible="visible"
        :footer="false"
        @cancel="close"
        draggable
    >
        <template #title>{{ $t('basics.importAccount') }}</template>
        <a-form :model="accForm" ref="accFormRef" :rules="accRules">
            <a-form-item
                field="parent_username"
                :label="$t('basics.parAdmin')"
                label-col-flex="90px"
                validate-trigger="blur"
            >
                <a-input
                    style="margin-right: 20px"
                    v-model="accForm.parent_username"
                    :placeholder="$t('basics.parText')"
                />
            </a-form-item>
            <a-form-item
                field="password"
                :label="$t('basics.password')"
                label-col-flex="90px"
                validate-trigger="blur"
            >
                <a-input
                    style="margin-right: 20px"
                    v-model="accForm.password"
                    :placeholder="$t('basics.prdText')"
                />
            </a-form-item>
            <a-form-item
                field="project_id"
                :label="$t('basics.bandPro')"
                label-col-flex="90px"
                validate-trigger="change"
            >
                <a-select
                    v-model="accForm.project_id"
                    style="width: 100%; margin-right: 20px"
                    :placeholder="$t('basics.textBandPro')"
                >
                    <a-option
                        v-for="item in projectList"
                        :label="item.project_name"
                        :value="item.id"
                    ></a-option>
                </a-select>
            </a-form-item>
            <!-- <a-form-item field="num" :label="$t('basics.accNums')" label-col-flex="90px" validate-trigger="blur">
          <a-input v-model="accForm.num" :placeholder="$t('basics.accNumText')" type="number" :min="0"/>
        </a-form-item> -->
        </a-form>
        <a-upload
            draggable
            :custom-request="upload"
            :show-file-list="false"
            accept=".xlsx,.xls"
            :on-button-click="ruleAdmin"
            :data="accForm"
        >
            <template #upload-button>
                <div class="rounded text-center p-7">
                    <div>
                        <!-- <icon-upload class="text-5xl text-gray-400" /> -->
                        <div style="display: flex; justify-content: center">
                            <img
                                class="text-[0px] w-[56px] h-[56px] imp-img"
                                src="@/assets/images/ic_daoru.png"
                            />
                        </div>
                        <div class="text-red-600 font-bold">导入Excel</div>
                        将文件拖到此处，或<span style="color: #3370ff"
                            >点击上传</span
                        >，只能上传 xls/xlsx 文件
                    </div>
                </div>
            </template>
        </a-upload>
        <div v-if="props.isShowLoad" class="mt-5 italic text-right">
            <a-link @click="sendDownload">下载Excel模板</a-link>
        </div>
    </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import commonApi from '@/api/common';
import tool from '@/utils/tool';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const accForm = ref({
    password: '123456'
});
const projectList = ref([]);
const accRules = ref({
    parent_username: [
        {
            required: true,
            message: t('basics.warnParAdmin')
        }
    ],
    password: [
        {
            required: true,
            message: t('basics.warnPrd')
        }
    ],
    project_id: [
        {
            required: true,
            message: t('basics.warnPro')
        }
    ]
});
const visible = ref(false);
const props = defineProps({
    upLoadData: {
        type: Object,
        default: {
            url: '', // 上传路径
            params: {} // 参数
        }
    },
    downLoadData: {
        type: Object,
        default: {
            url: '', // 下载路径
            params: {} // 参数
        }
    },
    isShowLoad: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['success']);

const open = (list, id) => {
    visible.value = true;
    projectList.value = list;
    accForm.value.project_id = id;
    accForm.value.parent_username = '';
};
const close = () => (visible.value = false);
const ruleAdmin = () => {
    return false;
};
const upload = (fileOption) => {
    Message.info('文件上传导入中...');
    const dataForm = new FormData();
    let { url, params } = props.upLoadData;
    params = accForm.value;
    // console.log(params)
    for (const key in params) {
        if (Object.hasOwnProperty.call(params, key)) {
            const element = params[key];
            dataForm.append(key, element);
        }
    }
    dataForm.append('file', fileOption.fileItem.file);
    commonApi.importExcel(url, dataForm).then(async (res) => {
        console.log('res', res);
        res.success && Message.success(res.message || '导入成功');
        emit('success');
        close();
    });
};

const sendDownload = () => {
    Message.info('请求服务器下载文件中...');
    const { url, params } = props.downLoadData;
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        commonApi.download(url).then((res) => {
            tool.download(res);
            Message.success('请求成功，文件开始下载');
        });
    }
};

defineExpose({ open, close });
</script>

<style lang="less" scoped>
::v-deep .arco-form-item-label {
}
.arco-input-wrapper {
}
::v-deep .arco-modal {
    background: @modal-bg-color;
}
::v-deep .arco-upload-list-item-content {
    //#333c4a
    background: @imp-input-bg-color;
}
::v-deep .arco-upload-list-item-name {
    //1d2129
    color: @imp-input-color;
}
::v-deep
    .arco-upload-list-item
    .arco-upload-progress:hover
    .arco-progress-circle-bg {
    cursor: pointer;
    stroke: @imp-close-color;
}
</style>
